import React from "react";
import { Link } from "react-router-dom";
import { RightOutline } from 'antd-mobile-icons'
import styled from 'styled-components'
import NavBarAgain from "../components/NavBarAgain";
import { connect } from 'react-redux'
import action from '../store/action'
import _ from '../assets/utils'
import { Toast } from 'antd-mobile'

const PersonalBox = styled.div`
    .baseInfo{
        box-sizing: border-box;
        margin: 40px 0;
        .pic{
            display: block;
            margin: 0 auto;
            width: 172px;
            height: 172px;
            border-radius: 50%;
        }
        .name{
            line-height: 100px;
            font-size: 36px;
            text-align: center;
            color: #000;
            text-decoration: none;
        }
    }
    .tab{
        display: block;
        font-size: 30px;
        margin: 20px 0;
        text-decoration: none;
        color: #000;
        font-weight: 800;
        padding: 10px;
        border-bottom: 1px solid #d9d3d3;
        .antd-mobile-icon{
            margin-left: 550px;
        }
    }
`
const Personal = function Personal(props){
    let { info,clearUserInfo,clearStoreList,navigate } = props
    const signOut = ()=>{ 
        clearStoreList()
        clearUserInfo()
        _.storage.remove('tk')
        Toast.show({
            icon:'success',
            content:'您已安全退出'
        })
        navigate('/login?to=/personal',{replace:true})
    }

    return <PersonalBox>
        <NavBarAgain title='个人中心' />
        <div className="baseInfo">
            <Link to='/update'>
                <img className="pic" src={info.pic} alt="" />
                <p className="name">{info.name}</p>
            </Link>
        </div>
        <div>
            <Link to='/store' className="tab">
                我的收藏
                <RightOutline />
            </Link>
            <Link className="tab" onClick={signOut}>
                退出登录
                <RightOutline />
            </Link>
        </div>
    </PersonalBox>
}
export default connect(
    state => state.base,
    {
        clearUserInfo:action.base.clearUserInfo,
        clearStoreList:action.store.clearStoreList
    }
)(Personal)